/*
 * @Author: Yxliam
 * @Date: 2024-01-15 09:08:28
 * @LastEditors: Yxliam
 * @LastEditTime: 2024-01-18 15:50:22
 * @Description:
 */
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { TransitionPresets } from "@react-navigation/stack";
import { View, StatusBar, Text, Button } from "react-native";
import themeStore from "stores/theme";
import Tabs from "../pages/tabs";
import Skin from "pages/skin";
import Login from "pages/login";
import SexScreen from "pages/changesex";
import { observer } from "mobx-react-lite";

const Stack = createNativeStackNavigator();

function ListScreen(props: any) {
  const { navigation } = props;
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>List Screen</Text>
      <Button onPress={() => navigation.goBack()} title="返回"></Button>
    </View>
  );
}
function DetailScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Detai2323l Screen</Text>
    </View>
  );
}

export default observer(() => {
  const theme = themeStore.theme;
  return (
    <Stack.Navigator initialRouteName="Main">
      <Stack.Screen
        name="Main"
        options={{
          headerShown: false, //隐藏头部导航栏
        }}
        component={Tabs}
      />
      <Stack.Screen
        name="Skin"
        options={{
          // headerShown: false,
          title: "",
          headerTintColor: theme.mainText,
          headerShadowVisible: false,
          headerStyle: {
            backgroundColor: theme.bgcolor, // 设置头部背景颜色
            // shadowColor: 'transparent', // 设置阴影颜色为透明
          },
          headerTitleStyle: {
            color: theme.mainText, // 设置头部标题文字颜色
          },
        }}
        component={Skin}
      />
      <Stack.Screen
        name="List"
        options={{
          headerShown: false,
        }}
        component={ListScreen}
      />
      <Stack.Screen
        name="Public"
        options={{
          headerShown: false,
        }}
        component={DetailScreen}
      />
      <Stack.Screen
        name="Sex"
        options={{
          headerShown: false,
        }}
        component={SexScreen}
      />
      <Stack.Screen
        name="Login"
        options={{
          headerShown: false,
        }}
        component={Login}
      />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
});
